<template>
  <div>
    <h1>单词列表</h1>
    <ul>
      <li v-for="word in words" :key="word.id">
        {{ word.word }} - {{ word.definition }}
        <button @click="fetchWordDetails(word.id)">获取详细信息</button>
        <p v-if="word.phonetic">音标: [{{ word.phonetic }}]</p>
        <p v-if="word.chineseDefinition">中文释义: {{ word.chineseDefinition }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['words'])
  },
  methods: {
    ...mapActions(['fetchWordDetails'])
  }
}
</script>

<style scoped>
/* 添加一些样式 */
</style>
